<template>
  <div class="container">
    <div class="select">
      <div class="weui_cells_title">管理住院号：</div>
      <div class="weui_cells weui_cells_access">
        <a @click="clickWard($index)" v-for="cd in wards" class="weui_cell" href="javascript:;">
          <div class="weui_cell_hd">
            <i class="fa fa-credit-card-alt fa-2x icon-color" style="width:35px;margin-right:15px;display:block;"></i>
          </div>
          <div class="weui_cell_bd weui_cell_primary">
            <p>{{cd.name}}</p>
            <p>{{cd.num}}</p>
          </div>
          <div class="weui_cell_ft">
            <span v-show="cd.isDefault" class="orange_tag">默认</span>
          </div>
        </a>
      </div>
      <!-- <div class="button_sp_area" style="text-align:center">
        <a @click="goAddBinding" href="javascript:;" style="font-size:18px;margin-right:16px;" class="weui_btn weui_btn_mini weui_btn_primary">绑住院号</a>
      </div> -->
    </div>
    <partial name="footer-copyright"></partial>
    <div>
      <div v-el:mask class="weui_mask_transition"></div>
      <div v-el:actionsheet class="weui_actionsheet">
        <div class="weui_actionsheet_menu">
          <div @click="setDefault" class="weui_actionsheet_cell">设为默认就住院号</div>
          <div @click="delete" class="weui_actionsheet_cell">删除住院号</div>
        </div>
        <div class="weui_actionsheet_action">
          <div v-el:actionsheetcancel class="weui_actionsheet_cell">取消</div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.blue_tag {
  background-color: #0ae;
  color: #fff;
  font-size: 13px;
  padding: 2px 4px;
  border: none;
  vertical-align: middle;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.orange_tag {
  background-color: #ff8208;
  color: #fff;
  font-size: 13px;
  padding: 2px 4px;
  border: none;
  vertical-align: middle;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
</style>
<script>
import { showCommonToast, setDefaultWard, deleteWard } from '../../vuex/actions'
import $ from 'jquery'

export default {
  name: 'ManageWardView',
  vuex: {
    getters: {
      wards: ({ ward }) => ward.wards
    },
    actions: {
      showCommonToast,
      setDefaultWard,
      deleteWard
    }
  },
  data: function () {
    return {
      currentWardId: 0
    }
  },
  methods: {
    clickWard: function (idx) {
      this.currentWardId = this.wards[idx].id
      this.showActionSheet()
    },
    goAddBinding: function () {
      this.$router.go({ name: 'addBindingWard' })
    },
    goAddNew: function () {
      this.$router.go({ name: 'addNewWard' })
    },
    showActionSheet: function () {
      var self = this
      var mask = $(this.$els.mask)
      var weuiActionsheet = $(this.$els.actionsheet)
      weuiActionsheet.addClass('weui_actionsheet_toggle')
      mask.show().addClass('weui_fade_toggle').one('click', function () {
        self.hideActionSheet(weuiActionsheet, mask)
      })
      $(this.$els.actionsheetcancel).one('click', function () {
        self.hideActionSheet(weuiActionsheet, mask)
      })
      weuiActionsheet.unbind('transitionend').unbind('webkitTransitionEnd')
    },
    hideActionSheet: function (weuiActionsheet, mask) {
      weuiActionsheet.removeClass('weui_actionsheet_toggle')
      mask.removeClass('weui_fade_toggle')
      weuiActionsheet.on('transitionend', function () {
        mask.hide()
      }).on('webkitTransitionEnd', function () {
        mask.hide()
      })
    },
    setDefault: function () {
      this.setDefaultWard(this.currentWardId)
      var mask = $(this.$els.mask)
      var weuiActionsheet = $(this.$els.actionsheet)
      this.hideActionSheet(weuiActionsheet, mask)
    },
    delete: function () {
      var self = this
      this.deleteWard(this.currentWardId).then(function (data) {
        var mask = $(self.$els.mask)
        var weuiActionsheet = $(self.$els.actionsheet)
        self.hideActionSheet(weuiActionsheet, mask)
        self.showCommonToast({ msg: data.msg })
      })
    }
  }
}
</script>
